<template>
  <div
    class="draggable-box"
    :style="{ top: position.top + 'px', left: position.left + 'px' }">
    <div class="box-header" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag">
      <div class="boxtitle">{{ title }}</div>
      <span class="close-btn" @click.stop="closeBox">X</span>
    </div>
    <div class="box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Box'
    },
    devicenumber: {
      type: Number,

    },
    deviceid: {
      type: Number,
      
    },
    lefttype:{
      type:String,
    },
    initialPosition: {
      type: Object,
      default: () => ({ top: 0, left: 0 })
    }
  },
  data() {
    return {
      position: this.initialPosition,
      isDragging: false,
      dragOffset: { x: 0, y: 0 }
    };
  },
  watch:{
    initialPosition(val){
          this.position = val
    }
  },
  methods: {
    startDrag(event) {
      // console.log("event",event);
      this.isDragging = true;
      this.dragOffset = {
        x: event.clientX - this.position.left,
        y: event.clientY - this.position.top
      };
    },
    onDrag(event) {
      if (this.isDragging) {
        this.position = {
          top: event.clientY - this.dragOffset.y,
          left: event.clientX - this.dragOffset.x
        };
      }
    },
    stopDrag() {
      this.$emit('move-box',this.position,this.devicenumber,this.deviceid,this.lefttype);
      this.isDragging = false;
    },
    
    closeBox() {
      this.$emit('remove-box');
    }
  }
};
</script>

<style scoped lang='scss'>
.draggable-box {
  position: absolute;
  width: 600px;
  height: 550px;
//   background-color: #1a1a1a;
  border: 1px solid #d1d1d1;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1000;
//   cursor: move;
}
.box-header {
  width: 100%;
  background-color: #2178f1;
  color: #fff;
  height: 43px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  box-sizing: border-box;
  .boxtitle {
     font-size: 16px;
     span {
        font-size: 14px;
        display: inline-block;
        padding: 3px 5px;
        cursor: pointer;
        margin-left: 20px;
        border: 1px solid #fff;
        border-radius: 4px;
     }
  }
}
.box-content {
  padding: 10px;
  width: 100%;
  height: calc(100% - 37px);
  background-color: #1A1A1A;
  box-sizing: border-box;
  :deep(.el-scrollbar__view) {
     white-space: wrap;
 }
}
.close-btn {
  cursor: pointer;
  font-size: 15px;
}
</style>
